<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek Chat</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>DeepSeek Chat</h1>
        <div id="chat-history" class="chat-box">
            <!-- 对话记录将显示在这里 -->
        </div>
        <div class="input-group">
            <input type="text" id="userInput" placeholder="请输入你的问题">
            <button id="sendButton">发送</button>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $("#sendButton").click(function() {
                var userInput = $("#userInput").val();
                if (userInput.trim() === "") return;

                // 将用户输入添加到对话记录
                $("#chat-history").append("<div class='user'>" + userInput + "</div>");

                // 清空输入框
                $("#userInput").val("");

                // 发送请求到后端
                $.ajax({
                    url: "/",
                    type: "POST",
                    data: { user_input: userInput, user_id: "default_user" },
                    success: function(response) {
                        // 将 AI 回复添加到对话记录
                        $("#chat-history").append("<div class='ai'>" + response.ai_reply + "</div>");
                        console.log("思考过程: " + response.reasoning);
                    },
                    error: function(error) {
                        console.error("错误: " + error.responseText);
                    }
                });
            });
        });
    </script>

    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .chat-box {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
        .user {
            background-color: #f0f8ff;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 5px;
            word-wrap: break-word;
        }
        .ai {
            background-color: #f8f9fa;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 5px;
            word-wrap: break-word;
        }
        .input-group {
            display: flex;
        }
        #userInput {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 5px;
        }
        #sendButton {
            padding: 8px 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</body>
</html>